<template>
  <div>
    <a-input-group class="group">
      <div class="item">
        <span class="title">标题：</span
        ><a-input v-model="title" class="input" placeholder="请输入标题名称" />
      </div>
      <div class="item">
        <span class="title">选择类型</span>
        <!-- @change="handleChange" -->
        <a-select default-value="lucy" class="select">
          <a-select-option value="jack"> Jack </a-select-option>
          <a-select-option value="lucy"> Lucy </a-select-option>
          <a-select-option value="disabled" disabled>
            Disabled
          </a-select-option>
          <a-select-option value="Yiminghe"> yiminghe </a-select-option>
        </a-select>
      </div>
      <div class="item">
        <span class="title">描述：</span
        ><a-input v-model="info" class="input" placeholder="请输入描述" />
      </div>
      <div class="item">
        <span class="title">链接：</span
        ><a-input v-model="url" class="input" placeholder="请输入链接地址" />
      </div>
      <div class="imgUpload">
        <AvatarUpload></AvatarUpload>
      </div>
    </a-input-group>

    <div class="sumbit" @click="toSumbit()">添加</div>
  </div>
</template>

<script lang="ts">
import AvatarUpload from "../../components/admin/AvatarUpload";

export default {
  name: "LoginItem",
  components: {
    AvatarUpload,
  },
  data() {
    return {
      title: "",
      type: "",
      icon: "",
      info: "",
      url: "",
    };
  },

  created() {},
  mounted() {
    // let param = {};
    // this.$api.login.getCateList(param).then((res) => {
    //   console.log(res);
    //   // this.data = res.data.data;
    //   // this.loading = false;
    //   ImagePreview({
    //     images: [
    //       "https://img.yzcdn.cn/vant/apple-1.jpg",
    //       "https://img.yzcdn.cn/vant/apple-2.jpg",
    //     ],
    //     closeable: true,
    //   });
    // });
    // Toast('222')
  },
  methods: {
    toSumbit() {
      if (this.title == "" || this.title == null) {
        this.$message.error("请输入标题");
        return;
      }

      if (this.info == "" || this.info == null) {
        this.$message.error("请输入描述");
        return;
      }

      if (this.url == "" || this.url == null) {
        this.$message.error("请输入工具链接");
        return;
      }

      let param = {
        title: this.title,
        icon: this.icon,
        info: this.info,
        url: this.url,
      };

      this.$api.admin.addTools(param).then((res) => {
        // console.log(res);
        if (res.code == 1) {
          this.$parent.tabPosition = 3;
          // this.userInfo.username = res.data.username;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.group {
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .item {
    display: flex;
    flex-direction: row;
    height: 50px;
    line-height: 50px;
    justify-content: left;
    align-items: center;
    margin-top: 20px;
    .title {
      width: 160px;
      text-align: center;
      font-size: 16px;
      color: gray;
      padding-left: 30px;
      margin-left: 30px;
      font-weight: 800;
    }
    .input {
      margin-right: 30px;
      width: 260px;
      text-align: left;
    }
    .select {
      margin-right: 30px;
      width: 260px;
      text-align: left;
    }
  }
}

.imgUpload {
  margin-left: -160px;
  margin-top: 50px;
}

.sumbit {
  background: #1890ff;
  border-radius: 8px;
  height: 44px;
  color: whitesmoke;
  font-weight: 800;
  text-align: center;
  line-height: 44px;
  width: 400px;
  font-size: 20px;
  margin-left: 60px;
  display: inline-block;
}
</style>
